<template>
    <el-date-picker
        v-model="formattedEventMonth"
        type="month"
        placeholder="请选择预产期"
        @change="updateEventMonth"
    ></el-date-picker>
</template>

<script>
export default {
    props: {
        value: {
            type: [String, Date], // 支持字符串和 Date 对象
            required: true
        }
    },
    computed: {
        formattedEventMonth: {
            get() {
                // 如果 value 是 Date 对象，转换为字符串
                const date = this.value instanceof Date ? this.value : new Date(this.value);
                const year = date.getFullYear();
                const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始
                return `${year}-${month}`;
            },
            set(value) {
                // 处理字符串格式的月份
                if (typeof value === 'string') {
                    const [year, month] = value.split('-');
                    this.$emit('input', new Date(year, month - 1).toISOString()); // 触发 input 事件更新父组件的值
                } else if (value instanceof Date) {
                    // 如果是 Date 对象，直接转换为 ISO 字符串
                    this.$emit('input', value.toISOString());
                } else {
                    console.error("Expected a string or Date value for month, but got:", value);
                }
            }
        }
    },
    methods: {
        updateEventMonth(value) {
            this.$emit('change', value); // 触发 change 事件
        }
    }
};
</script>

<style scoped>
/* 添加样式（如果需要） */
</style>